<template>
  <div class="index">
    <commonHeader></commonHeader>

    <div class="swiper-wrap wow fadeInUp">
      <swiper v-if="ListBanner1.length" :options="swiperOption" class="swiper-container swiper-container1"
        ref="mySwiper">
        <swiper-slide class="swiper-item" v-for="(item, index) of ListBanner1" :key="index">
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
      </swiper>
      <!-- <div class="banner-text">
        <div class="text">梦想惠元</div>
        <div class="introduct">未来已来千帆竞，乘风破浪万里航</div>
      </div> -->
    </div>
    <!-- <div class="banner" v-if="ListBanner1.length == 1">
      <img class="banner-img" :src="ListBanner1[0].banner" alt="" />
      <div class="banner-text">
        <div class="text">梦想惠元</div>
        <div class="introduct">未来已来千帆竞，乘风破浪万里航</div>
      </div>
    </div> -->

    <!-- <div class="news-tab wow fadeInUp">
      <router-link class="item active" @click.native="$router.go(0)" to="/dream#a0">合作交流</router-link>
      <router-link class="item" @click.native="$router.go(0)" to="/dream#a1">人才招募</router-link>
      <router-link class="item" @click.native="$router.go(0)" to="/dream#a2">关注惠元</router-link>
    </div> -->

    <div class="news-tab wow fadeInUp">
      <div class="item active" @click="anchor1('a0')">合作交流</div>
      <div class="item" @click="anchor1('a1')">人才招募</div>
      <div class="item" @click="anchor1('a2')">关注惠元</div>
    </div>


    <div class="museum wow fadeInUp" id="a0" ref="a0">
      <div class="text">
        <div class="text-tit">合作交流</div>
        <div class="text-con">欢迎国内外合作伙伴光临惠元参观考察</div>
      </div>
      <swiper :options="swiperOption1" class="swiper-container swiper-container2" ref="mySwiper1"
        v-if="ListBanner2.length">
        <swiper-slide class="swiper-item" v-for="(item, index) of ListBanner2" :key="index">
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
      </swiper>
      <div class="location">
        <div class="location-tit">惠元医院地址：</div>
        <div class="location-con">上海市浦东新区秀浦路2500弄4号</div>
      </div>
    </div>

    <div class="join wow fadeInUp" id="a1" ref="a1">
      <div class="img-text">
        <img class="img" v-if="ListBanner3.length" :src="ListBanner3[0].banner" alt="" />
        <div class="text">
          <div class="text-tit">人才招聘</div>
          <div class="text-con">
            人生有很多种可能 <br />
            只要勇敢一次 <br />
            往往能得到的东西比想象中更多 <br />
            <br />
            当初征服星辰大海的誓言还记得吗？<br />
            星辰大海一直在问 <br />
            你为什么还不来？ <br />
            <br />
            欢迎有热忱的您加入惠元医院 <br />
            有意者请致电 180 1740 5350
          </div>
        </div>
      </div>

      <div class="post">
        <div class="post-wrap bangxin">
          <div class="post-con">
            <div class="item" v-for="(item, index) in ListBanner4" :key="index">
              <div class="department">{{ item.title }}</div>
              <div class="name">
                <img class="icon" src="~@/assets/img/icon1.png" alt="" />
                <div class="text">{{ item.description }}</div>
              </div>
              <div class="site">
                <img class="icon" src="~@/assets/img/icon2.png" alt="" />
                <div class="text">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="attention wow fadeInUp" id="a2" ref="a2">
      <img class="img" src="~@/assets/img/attention.jpg" alt="" />
      <div class="attention-con">
        <div class="tit">关注惠元</div>
        <div class="weChat">
          <div class="item">
            <div class="item-tit">微信公众号</div>
            <img class="img" src="~@/assets/img/weixin.jpg" alt="" />
          </div>
          <!-- <div class="item">
            <div class="item-tit">官方微博</div>
            <img class="img" src="~@/assets/img/weibo.png" alt="" />
          </div>
          -->
          <div class="item">
            <div class="item-tit">抖音</div>
            <img class="img" src="~@/assets/img/douyin.jpg" alt="" />
          </div> 
        </div>
      </div>
    </div>

    <commonFooter></commonFooter>
  </div>
</template>

<script>
  // ajax
  import { AllBanner, AllContent } from "@/assets/js/api";

  import commonHeader from "@/components/header";
  import commonFooter from "@/components/footer";
  import { WOW } from "wowjs";
  export default {
    name: "dream",
    components: {
      commonHeader,
      commonFooter,
    },
    data() {
      const that = this;
      return {
        active: 0,
        active1: 0,
        // 轮播图banner
        ListBanner1: [],
        ListBanner2: [],
        ListBanner3: [],
        ListBanner4: [],

        swiperOption: {
          // 参数选项,显示小点
          // pagination: ".swiper-pagination",
          paginationClickable: true,
          //循环
          loop: true,
          //每张播放时长3秒，自动播放
          autoplay: 2000,
          // 用户操作swiper之后，是否禁止autoplay
          autoplayDisableOnInteraction: false,
          //滑动速度
          speed: 1000,
          // delay:1000
          // prevButton: ".swiper-button-prev",
          // nextButton: ".swiper-button-next",

          onSlideChangeStart: function (swiper) {
            // that.active = swiper.realIndex;
            //   this.realIndex + 1
            // console.log(swiper.realIndex);
          },
        },

        swiperOption1: {
          // 参数选项,显示小点
          // pagination: ".swiper-pagination1",
          paginationClickable: true,
          //循环
          loop: true,
          loopAdditionalSlides: 1,
          //每张播放时长3秒，自动播放
          autoplay: 2000,
          // 用户操作swiper之后，是否禁止autoplay
          autoplayDisableOnInteraction: false,
          //滑动速度
          speed: 1000,
          // delay:1000
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",
          slidesPerView: 1.5,
          centeredSlides: true,
          spaceBetween: 30,
          onSlideChangeStart: function (swiper) {
            // that.active = swiper.realIndex;
            //   this.realIndex + 1
            // console.log(swiper.realIndex);
          },
        },
      };
    },

    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      },
      swiper1() {
        return this.$refs.mySwiper1.swiper;
      },
    },

    methods: {
      cutNews(index) {
        // console.log(index);
        this.active = index;
      },

      // 跳转锚点
      // https://blog.csdn.net/yimaode/article/details/104649672/?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242
      goAnchor(selector) {
        let anchor = this.$el.querySelector(selector);
        if (anchor) {
          console.log(selector, "selector");
          document.documentElement.scrollTop = anchor.offsetTop;
        }
      },
      // wow动画
      wowFun() {
        var wow = new WOW({
          // 距离可视区域多少开始执行动画
          offset: 200,
          // 异步加载的内容是否有效
          live: true,
        });
        wow.init();
      },

      anchor1(index) {
        document.documentElement.scrollTop = this.$refs[index].offsetTop;
      }
    },
    created() { },
    mounted() {
      let parameter1 = {
        bannerposition: 15,
        // typename: "实力惠元-医生管理-医生说明",
      };
      // banner
      AllBanner(parameter1).then((response) => {
        // console.log(response.data, "HelloChildBanner")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner1 = data;
            this.$nextTick(() => {
              if (this.ListBanner1.length <= 1) {
                this.swiper.stopAutoplay();
                this.swiper.lockSwipes();
              };
              this.wowFun();
              this.goAnchor(this.$route.hash);
            });
          }
        }
      });

      let parameter2 = {
        bannerposition: 16,
        // typename: "实力惠元-医生管理-医生说明",
      };
      // banner
      AllBanner(parameter2).then((response) => {
        // console.log(response.data, "HelloChildBanner")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner2 = data;
            this.$nextTick(() => {
              this.wowFun();
              this.goAnchor(this.$route.hash);
            });
          }
        }
      });

      let parameter3 = {
        bannerposition: 17,
        // typename: "实力惠元-医生管理-医生说明",
      };
      // banner
      AllBanner(parameter3).then((response) => {
        // console.log(response.data, "HelloChildBanner")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner3 = data;

            this.$nextTick(() => {
              this.wowFun();
              this.goAnchor(this.$route.hash);
            });
          }
        }
      });

      let parameter4 = {
        typename: "梦想惠元-职位信息",
        sort: 0,
      };
      // banner
      AllContent(parameter4).then((response) => {
        console.log(response.data, "AllContent");
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner4 = data;
            console.log(this.ListBanner4);
            this.$nextTick(() => {
              this.wowFun();
              this.goAnchor(this.$route.hash);
            });
          }
        }
      });
    },

    // watch: {
    //   // 刷新页面
    //   $route(to, from) {
    //     this.$router.go(0)
    //   }
    // }
  };
</script>


<style lang="scss" scoped>
  @import "~@/assets/scss/dream.scss";
</style>